<template>
    <div>
        <div v-zid="'red'">11111</div>
        <div v-zid="witchColor">show</div>
        <button @click="changeColor">color</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            witchColor: 'blue'
        }
    },
    methods:{
        changeColor(){
            this.witchColor = 'red'
        }
    },
    // 自定义指令  el拿到的元素  bind拿到指令的值
    directives: {
        // zid: {
        //     //钩子函数
        //     mounted(el,bind){
        //         console.log(el,bind);
        //         el.style.color = bind.value
        //     },
        //     updated(el,bind){
        //         el.style.color = bind.value
        //     },
        // }

        // 简写方式
        zid(el,bind){
            el.style.color = bind.value
        }
    },
}
</script>

<style>

</style>